<style lang="less">
  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;
    .ivu-card-body {
      padding: 0px;
    }
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .bench_search {
    margin-bottom: 10px;
  }
  .nopadding .ivu-table-cell {
    padding: 0px 0px;
  }
  .item1{
    height: 42px;
    line-height: 40px;
  }
</style>

<template>
  <Card class="card_style" :bordered="false" :dis-hover="true">
    <Tabs :animated="false" @on-click="getCountData" v-model="searchInfo.tab_index">
      <TabPane label="统计">
        <Row class="bench_search">
          <Col span="4" v-if="companyCode === 'LM'">
            <span>区县：</span>
            <Select v-model="searchInfo.level1" transfer="" @on-change="getMailList(searchInfo.level1,1)" style="width: 70%;">
              <Option :value="item.id" v-for="item in mailList[0]" v-bind:key="item.id">{{item.title}}</Option>
            </Select>
          </Col>
          <Col span="4" v-if="companyCode === 'LM'">
            <span>街道：</span>
            <Select v-model="searchInfo.level2" transfer="" @on-change="getMailList(searchInfo.level2,2)" style="width: 70%;">
              <Option :value="item.id" v-for="item in mailList[1]" v-bind:key="item.id">{{item.title}}</Option>
            </Select>
          </Col>
         <!-- <Col span="4" v-if="companyCode === 'LM'">
            <span>社区：</span>
            <Select v-model="searchInfo.level3" transfer="" style="width: 70%;">
              <Option :value="item.id" v-for="item in mailList[2]" v-bind:key="item.id">{{item.title}}</Option>
            </Select>
          </Col>-->
          <Col span="6">
            <span>时间范围：</span>
            <DatePicker type="datetimerange" format="yyyy/MM/dd" transfer="" style="width: 70%"
            placement="bottom-end" v-model="searchInfo.applytime"></DatePicker>
          </Col>
          <Col span="2">
            <Button type="info" @click="searchData"><Icon type="ios-search" /> 搜索</Button>
          </Col>
          <Col span="2">
            <Button type="primary" @click="exportData"><Icon type="ios-download-outline"></Icon> 导出结果</Button>
          </Col>
        </Row>
        <Table :loading="searchInfo.loading1" :columns="columns1" :data="datalist" ref="table1"></Table>
      </TabPane>
     <!-- <TabPane label="事项办理统计" v-if="companyCode === 'LM'">
        <Row class="bench_search">
          <Col span="8">
            <span>事项名称：</span>
            <Input v-model="searchInfo.item_name" placeholder="事项名称" clearable style="width: 70%" />
          </Col>
          <Col span="2">
            <Button type="info" @click="searchData1"><Icon type="ios-search" /> 搜索</Button>
          </Col>
          <Col span="2">
            <Button type="primary" @click="exportData1"><Icon type="ios-download-outline"></Icon> 导出结果</Button>
          </Col>
        </Row>
        <Table border :columns="columns2" :data="itemlist" ref="table2"></Table>
        <Modal v-model="itemModalInfo.show" :title="itemModalInfo.title" width="1000">
          <Table border :loading="searchInfo.loading3" :columns="columns3" :data="itemhandlelist" ref="table3"></Table>
          <Page :total="itemModalInfo.totalRecord" class="page_style" :current="itemModalInfo.pageNo"
          :page-size="itemModalInfo.pageSize" @on-change="getHandleList"/>
          <div slot="footer">
            &lt;!&ndash; <Button type="info" @click="exportData2"><Icon type="ios-download-outline"></Icon> 导出本页名单</Button> &ndash;&gt;
            <Button type="error" @click="itemModalInfo.show=false">关闭</Button>
          </div>
        </Modal>
      </TabPane>-->
    </Tabs>
  </Card>
</template>

<script>
/* import { getMailLevelList, date2str, getCompanyCountList, getItemCountList, getItemHandleList } from '@/api/eventlist' */
import { getMailLevelList, getCompanyCountList, date2str } from '@/api/stree'
export default {
  data () {
    return {
      searchInfo: { tab_index: 0, level1: 0, applytime: [], loading1: false, loading3: false },
      itemModalInfo: { show: false, pageNo: 1, pageSize: 10 },
      datalist: [],
      itemlist: [],
      itemlistbak: [],
      itemhandlelist: [],
      mailList: [[], [], []],
      dic: {},
      columns1: [
        { title: '序号', type: 'index', width: 100, align: 'center' },
        { title: '办理机构名称', key: 'sq_name', align: 'center' },
        { title: '受理量（项）', key: 'num', width: 200, align: 'center', sortable: true },
        { title: '办结量（项）', key: 'finish_num', width: 200, align: 'center', sortable: true },
        {
          title: '办结率',
          key: 'percent',
          width: 200,
          sortable: true,
          align: 'center',
          render: (h, params) => {
            return h('div', [h('strong', params.row.percent.toFixed(2) + '%')])
          }
        }
      ],
      columns2: [
        { title: '序号', type: 'index', width: 80, align: 'center' },
        { title: '事项名称', key: 'item_name', align: 'center' },
        { title: '事项编号', key: 'item_id', width: 150, align: 'center' },
        { title: '受理量（项）', key: 'handle_num', width: 150, align: 'center', sortable: true },
        { title: '办结量（项）', key: 'finish_num', width: 150, align: 'center', sortable: true },
        {
          title: '办结率',
          key: 'percent',
          width: 150,
          sortable: true,
          align: 'center',
          render: (h, params) => {
            return h('div', [h('strong', params.row.percent.toFixed(2) + '%')])
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          className: 'nopadding',
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: {},
                on: {
                  click: () => {
                    this.itemDetail(params.row)
                  }
                }
              }, '办理名单')
            )
            return h('div', temp)
          }
        }
      ],
      columns3: [
        // { title: '事项名称', key: 'index', width: 100, align: 'center' },
        { title: '办理社区', key: 'company_name', align: 'center' },
        { title: '办理时间', key: 'create_time', width: 170, align: 'center' },
        { title: '办理状态', key: 'process_name', width: 110, align: 'center' },
        { title: '申请人姓名', key: 'name', width: 110, align: 'center' },
        { title: '申请人证件号', key: 'cardno', width: 170, align: 'center' },
        { title: '联系方式', key: 'mobile', width: 150, align: 'center' }
      ],
      columns4: [
        // { title: '事项名称', key: 'index', width: 100, align: 'center' },
        { title: '办理社区', key: 'company_name', align: 'center' },
        { title: '办理时间', key: 'create_time', width: 170, align: 'center' },
        { title: '办理状态', key: 'process_name', width: 110, align: 'center' },
        { title: '申请人姓名', key: 'name', width: 110, align: 'center' },
        { title: '申请人证件号', key: 'cardno', width: 170, align: 'center' },
        { title: '联系方式', key: 'mobile', width: 150, align: 'center' }
      ]
    }
  },
  computed: {
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  },
  methods: {
    // 社区统计下拉搜索框的级联查询
    getMailList (id, index) {
      if (id === 0) {
        this.mailList[index] = []
        this.searchInfo['level' + (index + 1)] = ''
        return
      }
      getMailLevelList({ id: id }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList[index] = res.data.data
          this.mailList[index].unshift({ id: 0, title: '全部' })
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    // 点击【事项办理统计】tab时查询事项列表
    getCountData () {
      if (this.searchInfo.tab_index === 1) {
        this.itemlist = []
        getItemCountList().then(res => {
          if (res.data.errcode === 0) {
            this.itemlistbak = res.data.data
            this.itemlistbak.forEach(element => {
              this.itemlist.push(element)
            })
          } else {
            this.$Notice.error({ title: '统计失败', desc: '' })
          }
        })
      }
    },
    // 社区受理统计查询
    searchData () {
      /* this.searchInfo.loading1 = true */
      let para = {
        start_time: date2str(this.searchInfo.applytime[0]),
        end_time: date2str(this.searchInfo.applytime[1])
      }
      if (this.companyCode === 'LM') {
        para.id = this.searchInfo.level3 || this.searchInfo.level2 || this.searchInfo.level1 || ''
        para.level = this.searchInfo.level3 ? '4' : this.searchInfo.level2 ? '3' : this.searchInfo.level1 ? '2' : '1'
      } else {
        para.level = '4'
      }
      getCompanyCountList(para).then(res => {
        if (res.data.errcode === 0) {
          this.datalist = res.data.data
          var num1 = 0
          var num2 = 0
          var num3 = 0 + '%'
          for (var i = 0; i < this.datalist.length; i++) {
            num1 = num1 + this.datalist[i].num
            num2 = num2 + this.datalist[i].finish_num
          }
          if (num2 === 0) {
            console.log(num2, '合计完成数量')
            num3 = 0
          } else {
            num3 = (num2 / num1) * 100
          }
          this.dic = {
            id: '合计',
            num: num1,
            finish_num: num2,
            sq_name: '合计',
            percent: num3
          }
          this.datalist.push(this.dic)
          this.searchInfo.loading1 = false
        } else {
          this.$Notice.error({ title: '统计失败', desc: res.data.errmsg })
        }
      })
    },
    // 事项统计查询-在已有的列表中筛选
    searchData1 () {
      this.itemlist = []
      this.itemlistbak.forEach(element => {
        this.searchInfo.item_name = this.searchInfo.item_name || ''
        if (element.item_name.indexOf(this.searchInfo.item_name) >= 0) {
          this.itemlist.push(element)
        }
      })
    },
    // 导出社区统计数据
    exportData () {
      if (this.datalist.length === 0) {
        this.$Notice.warning({ title: '导出失败', desc: '无统计数据' })
        return
      }
      let today = new Date()
      this.$refs.table1.exportCsv({
        filename: '社区受理统计' + date2str(today),
        original: false
      })
    },
    // 导出事项统计
    exportData1 () {
      if (this.itemlist.length === 0) {
        this.$Notice.warning({ title: '导出失败', desc: '无统计数据' })
        return
      }
      let today = new Date()
      this.$refs.table2.exportCsv({
        filename: '事项统计' + date2str(today),
        original: false
      })
    },
    // 事项统计后查询每个事项的办理人员名单
    itemDetail (item) {
      this.itemModalInfo.title = item.item_name + '-办理人员名单'
      this.itemModalInfo.item_id = item.item_id
      this.itemModalInfo.show = true
      this.getHandleList(1)
    },
    // 每个事项办理人员名单列表
    getHandleList (pageNo) {
      this.searchInfo.loading3 = true
      let para = {
        item_id: this.itemModalInfo.item_id,
        pageNo: pageNo,
        pageSize: this.itemModalInfo.pageSize
      }
      getItemHandleList(para).then(res => {
        if (res.data.errcode === 0) {
          this.itemhandlelist = res.data.data.results
          this.itemModalInfo.totalRecord = res.data.data.totalRecord
          this.searchInfo.loading3 = false
        } else {
          this.$Notice.error({ title: '查询失败', desc: '获取办理人员名单失败' })
        }
      })
    }
    // 导出人员名单功能暂停
    // exportData2 () {
    //   if (this.itemhandlelist.length === 0) {
    //     this.$Notice.warning({ title: '导出失败', desc: '无统计数据' })
    //     return
    //   }
    //   this.$refs.table3.exportCsv({
    //     filename: this.itemModalInfo.title,
    //     original: false
    //   })
    // }
  },
  mounted () {
    this.getMailList(null, 0)
    this.dic = {
      id: '合计',
      num: 0,
      finish_num: 0,
      sq_name: '合计',
      percent: 0
    }
    this.datalist.push(this.dic)
    console.log('~~~~~~~')
    console.log(this.datalist)
  }
}
</script>
